<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas冰川波浪起伏动画DEMO演示</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
  <script type="x-shader/x-vertex" id="vertexshader">
  // switch on high precision floats
  #ifdef GL_ES
  precision highp float;
  #endif
  
  attribute float displacement;
  uniform float amplitude;
  uniform float tick;
  varying vec3 vNormal;  

  void main()
  {
    
    float amplitudes = cos(position[0] + tick / 500.0) *
    									 cos(position[1] + tick / 500.0) +
                       amplitude;
      
    vec3 newPosition = 	position +
    										normal *
                      	vec3(amplitudes * displacement / 2.0);
  	vNormal = newPosition;
  
    gl_Position = projectionMatrix *
                  modelViewMatrix *
                  vec4(newPosition,1.0);
  }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">

	varying vec3 vNormal;
  uniform vec3 light;
  
  void main() {
    // calc the dot product and clamp
    // 0 -> 1 rather than -1 -> 1

    // ensure it's normalized
    vec3 lightn = normalize(light);

    // calculate the dot product of
    // the light to the vertex normal
    float dProd = max(0.0, 
											dot(vNormal, lightn));

    // feed into our frag colour
    gl_FragColor = vec4(dProd * 0.8, // R
                        dProd * 0.95, // G
                        dProd, // B
                        0.9);  // A

  }
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
